<template>
    <div class="main-container">
        <div class="title">{{ active_tab.text }} Balance</div>
        <div class="choose">
            <div class="choose-item" v-for="item in tabs" :key="item.id" @click="active_tab = item" :style="`border-color: ${ active_tab.id == item.id ? '#2563eb' : '#00000000' }; background-color: ${ active_tab.id == item.id ? 'var(--active-more-light-color)' : '#00000000' }`">
                <div class="header-box">
                    <div class="icon"></div>
                    <div class="text">{{ item.text }} Funds</div>
                </div>
                <div class="desc">{{ item.desc }}</div>
            </div>
        </div>
        <div class="current">
            <div class="sub-title">Current Balance</div>
            <div class="money">${{ userInfo.balance }}</div>
            <div class="text">Available for trading</div>
        </div>
        <div class="transfer">
            <div class="sub-title">{{ active_tab.subTitle }}</div>
            <div class="amount">
                <div class="text">Amount</div>
                <div class="input">
                    <div class="k">$</div>
                    <input type="number" placeholder="0.00" step="0.01" min="0.00" v-model="amount">
                </div>
            </div>
            <div class="quick-select">
                <div class="text">Quick Select</div>
                <div class="select">
                    <div class="select-item" v-for="item in quick_select" :key="item.id" @click="amount = item.value" :style="`outline: 0.1vw solid ${ item.value == amount ? '#ccc' : '#00000000' }`">${{ item.value }}</div>
                </div>
            </div>
            <div class="photo-line" v-show="active_tab.id == 1">
                <div class="text">Photo</div>
                <div class="upload-file-line">
                    <div class="empty" v-show="!depositPage.fileObj.file"></div>
                    <div class="img" v-show="depositPage.fileObj.file" :style="`--img: url(${ depositPage.fileObj.base64 })`"></div>
                    <input type="file" accept="image/*" @change="changeFile" />
                </div>
            </div>
            <div class="total">
                <div class="total-amount">
                    <div class="price-name">{{ active_tab.text }} amount</div>
                    <div class="price">{{ amount.toFixed(2) }}</div>
                </div>
                <div class="count-box">
                    <div class="quantity">Processing fee</div>
                    <div class="count">{{ '$0.00' }}</div>
                </div>
                <div class="total-cost">
                    <div class="total-text">Total</div>
                    <div class="total-price">{{ amount.toFixed(2) }}</div>
                </div>
            </div>
            <div class="btn-box" @click="submit">
                <div class="btn">{{ active_tab.text }} Funds</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { userInfo } from "@/service/user";
import { loading } from "@/service/status";
import { depositService, depositPage, withdrawPage } from "@/service/deposit";

const tabs = [
    { id: 1, text: "Deposit", desc: 'Add money to your trading account', subTitle: 'Deposit to Your Account', data: depositPage },
    { id: 2, text: "Withdraw", desc: 'Transfer money from your trading account', subTitle: 'Withdraw from Your Account', data: withdrawPage },
];

const quick_select = [
    { id: 1, value: 100 },
    { id: 2, value: 500 },
    { id: 3, value: 1000 },
    { id: 4, value: 5000 },
];

const active_tab = ref(tabs[0]);
const amount = ref(0);

function changeFile(e) {
    let file = e.target.files[0];
    if (!file) return;
    depositPage.fileObj.file = file;
    const reader = new FileReader();
    reader.onload = function(e) {
        depositPage.fileObj.base64 = e.target.result;
    };
    reader.onerror = function() {
        console.error('文件读取失败');
        depositPage.fileObj.file = null;
    };
    reader.readAsDataURL(file);
}

async function submit() {
    loading.value = true;
    active_tab.value.data.amount = amount.value;
    await ([depositService.deposit, depositService.withdraw][active_tab.value.id - 1])();
    setTimeout(() => {
        loading.value = false;
    }, 1000);
}

onMounted(() => {
    depositPage.resetData();
    withdrawPage.resetData();
});
</script>

<style scoped lang="less">
.main-container {
    box-sizing: border-box;
    width: 70%;
    min-height: calc(100vh - var(--nav-height) - var(--footer-height));
    margin: 0 auto;
    padding: 1.5vw 11vw;
    display: flex;
    flex-direction: column;
    gap: 2vw;

    .title {
        font-size: 1.8vw;
        font-weight: 600;
    }

    .choose {
        display: flex;
        background-color: #fff;
        border-radius: 0.5vw;
        box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.05);
        overflow: hidden;

        &-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1.5vw 2vw;
            border-bottom: 0.2vw solid #00000000;

            .header-box {
                display: flex;
                justify-content: center;
                align-items: center;

                .text {
                    font-size: 1vw;
                    font-weight: 600;
                }
            }

            .desc {
                font-size: 0.8vw;
                color: var(--text-light-color);
            }
        }
    }

    .current, .transfer {
        display: flex;
        flex-direction: column;
        gap: 0.5vw;
        background-color: #fff;
        border-radius: 0.5vw;
        box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.05);
        padding: 1vw;

        .sub-title {
            font-size: 1.2vw;
            font-weight: 600;
        }
    }

    .current {
        .money {
            font-size: 2vw;
            font-weight: 600;
            color: var(--active-color);
        }

        .text {
            font-size: 0.8vw;
            color: var(--text-light-color);
        }
    }

    .transfer {
        .sub-title {
            padding-bottom: 0.5vw;
        }

        .amount, .quick-select, .photo-line {
            display: flex;
            flex-direction: column;
            gap: 0.5vw;

            .text {
                font-size: 0.8vw;
            }
        }

        .amount {
            .input {
                width: 100%;
                height: 2vw;
                display: flex;
                align-items: center;
                gap: 0.2vw;
                background-color: var(--bg-strong-color);
                padding: 0.2vw 0.5vw;
                border-radius: 0.5vw;

                .k {
                    font-size: 1vw;
                }
                
                input {
                    font-size: 1vw;
                    width: 100%;
                    border: 0;
                    outline: 0;
                    background-color: var(--bg-strong-color);
                }
            }
        }

        .quick-select {
            .select {
                display: flex;
                justify-content: space-between;
                gap: 0.5vw;

                &-item {
                    flex: 1;
                    padding: 0.5vw 0;
                    border-radius: 0.5vw;
                    text-align: center;
                    background-color: var(--bg-color);

                    &:hover {
                        background-color: var(--bg-strong-color);
                    }
                }
            }
        }
        .photo-line {
            .upload-file-line {
                width: 100%;
                height: 20vw;
                --border-width: 0.2vw;
                --add-icon-size: 3vw;
                position: relative;

                .empty, .img, input {
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .empty {
                    border: var(--border-width) dashed var(--border-color);
                    border-radius: 1vw;

                    &::before, &::after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        background: var(--border-color);
                    }

                    &::before {
                        width: var(--border-width);
                        height: var(--add-icon-size);
                    }

                    &::after {
                        width: var(--add-icon-size);
                        height: var(--border-width);
                    }
                }

                input {
                    opacity: 0;
                }
            }
        }

        .total {
            margin: 1vw 0;

            .total-amount {
                display: flex;
                justify-content: space-between;
                margin-bottom: 0.5vw;

                &>div {
                    font-size: 0.8vw;
                }
            }

            .count-box {
                display: flex;
                justify-content: space-between;

                &>div {
                    font-size: 0.8vw;
                }
            }

            .total-cost {
                display: flex;
                justify-content: space-between;
                border-top: 0.1vw solid var(--border-color);
                margin-top: 0.5vw;
                padding-top: 0.5vw;

                &>div {
                    font-size: 0.9vw;
                }
            }
        }

        .btn-box {
            box-sizing: border-box;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.5vw;
            border-radius: 0.5vw;
            background-color: var(--active-color);

            .btn {
                color: #fff;
            }
        }
    }
}
</style>